<style lang="scss" scoped>
#ugcfileupload{
    .myreport-list{
        padding: 30px;
        border-radius: 10px;
        background-color: #ffffff;
        box-shadow: 0 0 10px 0 #cfcfcf;
        border: 1px solid rgba(255, 255, 255, 0);
        .myreport-header{
            .right{
                float:right;
                width: 20%;
                margin-top: -20px;
            }
        }
        .myreport-table{
            margin-top: 20px;
            position:relative;
            min-height:200px;
            .el-table{
                min-height: 450px;
            }
        }
        .pagination{
            margin-top:20px;
            height: 32px;
            line-height: 32px;
        }
    }
}
</style>

<template>
    <div id="ugcfileupload">
        <!-- <div>
            <Upload ref="upload" multiple :action= "urls" :headers="{'Authorization':this.$store.state.token}" :on-success="upsuccess" :on-error="uperror">
                <Button type="ghost" style="background:#4578ad;color:#fff;">上传文件</Button>
            </Upload>
        </div> -->
        <div class="myreport-list">
            <div class="myreport-header">
                <Upload ref="upload" multiple :action= "urls" :headers="{'Authorization':this.$store.state.token}" :on-success="upsuccess" :show-upload-list = false :on-error="uperror">
                    <Button type="ghost" style="background:#4578ad;color:#fff;">上传文件</Button>
                </Upload>
            </div>
            <div class="myreport-table">
                <el-table v-if="!isWarnShow" v-loading="loading" :data="fileList" element-loading-text="数据加载中，请稍后" border style="width:100%" max-height="500">
                    <el-table-column label="文件名称">
                        <template slot-scope="scope">
                            <span href="javascript:;" style="line-height: 45px;">{{scope.row.fileName}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column  label="文件大小" width="320">
                        <template slot-scope="scope">
                            <span  href="javascript:;" style="line-height: 45px;">{{scope.row.size}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="uploadDate" label="创建日期"></el-table-column>
                    <div slot="empty"></div>
                </el-table>
                <div v-if='emptyShow' class='empty'>
                    <img style="display:block;float:left;" src="/static/icon/add.png" />
                    <span style="display:block;float:left;margin-top:3px;margin-left:10px;">暂无数据，请创建</span>
                </div>
                <warn v-if="isWarnShow" @callback="getMyReportList"></warn>
            </div>
        </div>
        
    </div>
</template>

<script>
import { apiUrl, filePath } from '@/common/js/Base.js'
import { data } from 'api/index.js'
import { setCookie, getCookie, delCookie } from '@/common/js/cookie.js';    
export default {
    name:"ugcfileupload",
    data () {
        return {
            urls:'',
            isWarnShow:false,
            fileList:[],
            emptyShow:false,
            loading:true,
        }
    },
    mounted() {
        this.urls = apiUrl.rare + 'file/bedFileUpload'
        this.getUpLoadList()
    },
    methods: {
        upsuccess(response, file, fileList) {
            console.log(response);
            if (response.returnCode == 0 || response.returnCode == 200) {
                this.$Message.success(response.msg);
                this.getUpLoadList()
            } else {
                this.$Message.error(response.msg);
            }

        },
        getUpLoadList () {
            data.GetUpLoadList().then( res => {
                this.loading = true;
                if(res.returnCode==0 || res.returnCode==200){
                    this.loading = false
                    this.fileList = res.data
                }
                else{
                    this.$Message.error(res.msg);
                    this.loading=false;
                }
                if(res.data==null || res.data.length == 0){
                    this.emptyShow = true;
                }
                else{
                    this.emptyShow = false
                }
            }).catch( err => {
                this.loading = false;
                this.isWarnShow = true
            })
        }
    }
}
</script>

<style>

</style>
